<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <style>
      * {
        padding: 0px;
        margin: 0px;
        font-size: 16px;
        font-family: 'Microsoft YaHei';
      }
      .xttblog_box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        position: relative;
      }
      .xttblog_box canvas {
        position: absolute;
      }
      #xttblog {
        background-color: white;
        border-radius: 100%;
      }
      #xttblog01,
      #xttblog03 {
        left: 50px;
        top: 50px;
        z-index: 30;
      }
      #xttblog02 {
        left: 75px;
        top: 75px;
        z-index: 20;
      }
      #xttblog {
        -o-transform: transform 6s;
        -ms-transform: transform 6s;
        -moz-transform: transform 6s;
        -webkit-transform: transform 6s;
        transition: transform 6s;
        -o-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
      }
      .taoge_btn {
        width: 60px;
        height: 60px;
        left: 120px;
        top: 120px;
        border-radius: 100%;
        position: absolute;
        cursor: pointer;
        border: none;
        background: transparent;
        outline: none;
        z-index: 40;
      }
    </style>
    <script
      type="text/javascript"
      src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"
    ></script>
    <script>
      $(document).ready(function () {
        //旋转角度
        var angles
        //可抽奖次数
        var clickNum = 5
        //旋转次数
        var rotNum = 0
        //中奖公告
        var notice = null
        //转盘初始化
        var color = [
          '#626262',
          '#787878',
          'rgba(0,0,0,0.5)',
          '#DCC722',
          'white',
          '#FF4350',
        ]
        var info = [
          '谢谢参与',
          ' 1000',
          ' 10',
          ' 500',
          ' 100',
          ' 4999',
          ' 1',
          ' 20',
        ]
        var info1 = [
          '再接再厉',
          '  元',
          '  元',
          ' 淘金币',
          '  元',
          ' 淘金币',
          '  元',
          ' 淘金币',
        ]
        canvasRun()
        $('#tupBtn').bind('click', function () {
          if (clickNum >= 1) {
            //可抽奖次数减一
            clickNum = clickNum - 1
            //转盘旋转
            runCup()
            //转盘旋转过程“开始抽奖”按钮无法点击
            $('#tupBtn').attr('disabled', true)
            //旋转次数加一
            rotNum = rotNum + 1
            //“开始抽奖”按钮无法点击恢复点击
            setTimeout(function () {
              alert(notice)
              $('#tupBtn').removeAttr('disabled', true)
            }, 6000)
          } else {
            alert('亲，抽奖次数已用光！')
          }
        })

        //转盘旋转
        function runCup() {
          probability()
          var degValue = 'rotate(' + angles + 'deg' + ')'
          $('#xttblog').css('transform', degValue)
        }

        //各奖项对应的旋转角度及中奖公告内容
        function probability() {
          //获取随机数
          var num = parseInt(Math.random() * (7 - 0 + 0) + 0)
          // todo: 这里的旋转角度应该是算出来而不是写固定值
          //概率
          if (num == 0) {
            angles = 2160 * rotNum + 1800
            notice = info[0] + info1[0]
          }
          //概率
          else if (num == 1) {
            angles = 2160 * rotNum + 1845
            notice = info[7] + info1[7]
          }
          //概率
          else if (num == 2) {
            angles = 2160 * rotNum + 1890
            notice = info[6] + info1[6]
          }
          //概率
          else if (num == 3) {
            angles = 2160 * rotNum + 1935
            notice = info[5] + info1[5]
          }
          //概率
          else if (num == 4) {
            angles = 2160 * rotNum + 1980
            notice = info[4] + info1[4]
          }
          //概率
          else if (num == 5) {
            angles = 2160 * rotNum + 2025
            notice = info[3] + info1[3]
          }
          //概率
          else if (num == 6) {
            angles = 2160 * rotNum + 2070
            notice = info[2] + info1[2]
          }
          //概率
          else if (num == 7) {
            angles = 2160 * rotNum + 2115
            notice = info[1] + info1[1]
          }
        }

        //绘制转盘
        function canvasRun() {
          var canvas = document.getElementById('xttblog')
          var canvas01 = document.getElementById('xttblog01')
          var canvas03 = document.getElementById('xttblog03')
          var canvas02 = document.getElementById('xttblog02')
          var ctx = canvas.getContext('2d')
          var ctx1 = canvas01.getContext('2d')
          var ctx3 = canvas03.getContext('2d')
          var ctx2 = canvas02.getContext('2d')
          createCircle()
          createCirText()
          initPoint()

          //外圆
          function createCircle() {
            var startAngle = 0 //扇形的开始弧度
            var endAngle = 0 //扇形的终止弧度
            //画一个8等份扇形组成的圆形
            for (var i = 0; i < 8; i++) {
              startAngle = Math.PI * (i / 4 - 1 / 8)
              endAngle = startAngle + Math.PI * (1 / 4)
              ctx.save()
              ctx.beginPath()
              ctx.arc(150, 150, 100, startAngle, endAngle, false)
              ctx.lineWidth = 120
              if (i % 2 == 0) {
                ctx.strokeStyle = color[0]
              } else {
                ctx.strokeStyle = color[1]
              }
              ctx.stroke()
              ctx.restore()
            }
          }

          //各奖项
          function createCirText() {
            ctx.textAlign = 'start'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = color[3]
            var step = (2 * Math.PI) / 8
            for (var i = 0; i < 8; i++) {
              ctx.save()
              ctx.beginPath()
              ctx.translate(150, 150)
              ctx.rotate(i * step)
              ctx.font = ' 20px Microsoft YaHei'
              ctx.fillStyle = color[3]
              ctx.fillText(info[i], -30, -115, 60)
              ctx.font = ' 14px Microsoft YaHei'
              ctx.fillText(info1[i], -30, -95, 60)
              ctx.closePath()
              ctx.restore()
            }
          }

          function initPoint() {
            //箭头指针
            ctx1.beginPath()
            ctx1.moveTo(100, 24)
            ctx1.lineTo(90, 62)
            ctx1.lineTo(110, 62)
            ctx1.lineTo(100, 24)
            ctx1.fillStyle = color[5]
            ctx1.fill()
            ctx1.closePath()
            //中间小圆
            ctx3.beginPath()
            ctx3.arc(100, 100, 40, 0, Math.PI * 2, false)
            ctx3.fillStyle = color[5]
            ctx3.fill()
            ctx3.closePath()
            //小圆文字
            ctx3.font = 'Bold 20px Microsoft YaHei'
            ctx3.textAlign = 'start'
            ctx3.textBaseline = 'middle'
            ctx3.fillStyle = color[4]
            ctx3.beginPath()
            ctx3.fillText('开始', 80, 90, 40)
            ctx3.fillText('抽奖', 80, 110, 40)
            ctx3.fill()
            ctx3.closePath()
            //中间圆圈
            ctx2.beginPath()
            ctx2.arc(75, 75, 75, 0, Math.PI * 2, false)
            ctx2.fillStyle = color[2]
            ctx2.fill()
            ctx2.closePath()
          }
        }
      })
    </script>
  </head>
  <body>
    <div class="xttblog_box">
      <canvas id="xttblog" width="300px" height="300px"
        >抱歉！浏览器不支持。</canvas
      >
      <canvas id="xttblog01" width="200px" height="200px"
        >抱歉！浏览器不支持。</canvas
      >
      <canvas id="xttblog03" width="200px" height="200px"
        >抱歉！浏览器不支持。</canvas
      >
      <canvas id="xttblog02" width="150px" height="150px"
        >抱歉！浏览器不支持。</canvas
      >
      <button id="tupBtn" class="taoge_btn"></button>
    </div>
    <!-- 更改系统默认弹窗 -->
    <script type="text/javascript">
      window.alert = function (str) {
        var shield = document.createElement('DIV')
        shield.id = 'shield'
        shield.style.position = 'absolute'
        shield.style.left = '50%'
        shield.style.top = '50%'
        shield.style.width = '280px'
        shield.style.height = '150px'
        shield.style.marginLeft = '-140px'
        shield.style.marginTop = '-110px'
        shield.style.zIndex = '25'
        var alertFram = document.createElement('DIV')
        alertFram.id = 'alertFram'
        alertFram.style.position = 'absolute'
        alertFram.style.width = '280px'
        alertFram.style.height = '150px'
        alertFram.style.left = '50%'
        alertFram.style.top = '50%'
        alertFram.style.marginLeft = '-140px'
        alertFram.style.marginTop = '-110px'
        alertFram.style.textAlign = 'center'
        alertFram.style.lineHeight = '150px'
        alertFram.style.zIndex = '300'
        strHtml =
          '<ul style="list-style:none;margin:0px;padding:0px;width:100%">\n'
        strHtml +=
          ' <li style="background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white">[中奖提醒]</li>\n'
        strHtml +=
          ' <li style="background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722">' +
          str +
          '</li>\n'
        strHtml +=
          ' <li style="background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;"><input type="button" value="确 定" onclick="doOk()" style="width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px"/></li>\n'
        strHtml += '</ul>\n'
        alertFram.innerHTML = strHtml
        document.body.appendChild(alertFram)
        document.body.appendChild(shield)
        this.doOk = function () {
          alertFram.style.display = 'none'
          shield.style.display = 'none'
        }
        alertFram.focus()
        document.body.onselectstart = function () {
          return false
        }
      }
    </script>
  </body>
</html>
